<template>
  <div>
    <van-checkbox-group v-model="result" v-for="item in CartArr" :key="item.id">
      <van-checkbox :name="item" @click="kessFn" label-disabled>
        <van-swipe-cell>
          <van-card
            :price="item.retail_price"
            :desc="item.goods_name"
            title="描述信息"
            :thumb="item.list_pic_url"
          >
            <template #num>
              <van-stepper v-model="item.number" integer />
            </template>
          </van-card>

          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="Delfn(item)"
            />
          </template>
        </van-swipe-cell>
      </van-checkbox>
    </van-checkbox-group>
    <!-- 提交订单栏 -->
    <van-submit-bar :price="priceMix" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checked" @click="checkedFn">全选</van-checkbox>
      <template #tip>
        你的收货地址不支持同城送,
        <span @click="onClickEditAddress">修改地址</span>
      </template>
    </van-submit-bar>
  </div>
</template>
<script>
import { CartFn, DelFn } from "@/utils/http";
export default {
  name: "Car",
  data() {
    return {
      result: [], //选中的集合
      CartArr: [], //购物车数量
      checked: false, //全选
    };
  },
  computed: {
    //计算总价
    priceMix() {
      let sum = 0;
      this.result.forEach((item) => {
        sum += item.number * item.retail_price * 100;
      });
      return sum;
    },
  },
  methods: {
    //提交
    onSubmit() {
      if (this.result.length != 0) {
        this.$toast.loading({
          // type: "success",
          // message: "跳转支付",
          duration: "3000",
          message: "跳转支付",
          forbidClick: true,
        });
      } else {
        this.$toast({
          type: "fail",
          duration: "2000",
          message: "你最少要选中一项",
        });
      }
    },
    //修改地址
    onClickEditAddress() {},
    //全选
    checkedFn() {
      if (this.checked) {
        //选中的总数量=总数量
        this.result = this.CartArr;
      } else {
        //选中数量为空
        this.result = [];
      }
    },
    //单选
    kessFn() {
      if (
        this.result.length == this.CartArr.length &&
        this.CartArr.length != 0
      ) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    Delfn(item) {
      //删除接口
      DelFn({ productIds:item.product_id.toString()}).then((res) => {
        console.log(res);
      
       if( this.CartArr=res.data.data.cartList){
         this.$toast({
            type: "success",
            message: "删除成功",
            duration: "2000",
          });
       }
      });

    },
  },
  created() {
    CartFn().then((res) => {
      console.log(res);
      this.CartArr = res.data.data.cartList;
    });
  },
};
</script>

<style  lang='less' scope>
.van-checkbox__label {
  flex: 1;
}
.van-submit-bar {
  margin-bottom: 50px;
}
.delete-button {
  height: 100%;
}
</style>